<?php
header("Content-type:text/html; charset=utf-8");
?>

<!DOCTYPE html>
<html>
<head>
<title>一叶书签</title>
<link rel="shortcut icon" href="./favicon.ico" />
<link rel="bookmark" href="./favicon.ico" />
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<link href="https://cdn.bootcss.com/element-ui/2.8.2/theme-chalk/index.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/element-ui/2.8.2/index.js"></script>
<script src="/static/js/axios@0.19.0.js"></script>
<script src="/static/js/qs@6.7.0.js"></script>
</head>
<body>
<div id="vue_app">
<el-row>
  <el-col :span="6">
  <div class="leftside">.
  </div>
  </el-col>
  <el-col :span="12">
    <el-row>
    <el-col :span="24" style="text-align:center">
      <img src="./leaf.png" alt="枫叶" />
    </el-col>
    </el-row>
    <el-row>
    <el-col :span="24" style="text-align:center">
      <el-input v-model="username" placeholder="用户名"></el-input>
      <el-input v-model="password" placeholder="密  码" show-password></el-input>
      <el-button v-on:click="login">登录</el-button>
      <el-button v-on:click="logon">注册</el-button>
    </el-col>
    </el-row>
  </el-col>
  <el-col :span="6">
  <div class="rightside">.
  </div>
  </el-col>
</el-row>
</div>
</body>
<script type="text/javascript">
let vm = new Vue({
  el: '#vue_app',
  data: {
    username:"",
    password:"",
    url:""
  },
  oncreate: function () {
    this.url = window.location.href;
  },
  methods: {
    login: function() {
      that = this;
      data = Qs.stringify({
        reqpath:"login",
        username:that.username,
        password:that.password
      });
      config = {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      };
      axios.post(this.url, data, config).then(function(res) {
        let response = res.data;
        if(response.code == 0){
          window.location.reload();
        }else if(response.code == 1 || response.code == 2){
          that.$notify({
            message: '用户名或密码错误',
            type: 'warning'
          });
        }
      });
    },
    logon: function() {
      that = this;
      this.$confirm('用户名不可修改，确认注册新用户吗？', {
        confirmButtonText: '确定',
      }).then(() => {
        data = Qs.stringify({
          reqpath:"logon",
          username:that.username,
          password:that.password
        });
        config = {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        };
        axios.post(this.url, data, config).then(function(res) {
          let response = res.data;
          if(response.code == 0){
            window.location.reload();
          }else if(response.code == 1 || response.code == 2){
            that.$notify({
              message: '用户名已存在',
              type: 'warning'
            });
          }
        });
      }).catch(() => {});
    }
  }
});
</script>
<style>
html,body{height:100%;width:100%;margin:0;padding:0;background:#EAEAEF;}
#vue_app{
  height:100%;
  width:100%;
  margin:0;
  padding:0;
}
.leftside{
}
.rightside{
}
</style>
</html> 

